Component Composition
As we keep learning about components in this section there is one essential principle that we really need to focus on now, which is component composition.
Now, in order to talk about component composition, we first need to take a look at what happens when we simply use or include a component in another component in JSX. So let’s say that we have this model component that we want to reuse, and also this success component which simply renders the message well done. And then we just use the success component inside the modal component like this.
And this sort of thing is exactly what we have been doing with our components most of the time, right? So we just use them inside of other components. However, when it comes to re-usability this creates a big problem. That’s because right now the success component really is inside of modal.
They’re deeply linked together in the JSX right now, and therefore we cannot reuse this modal component to display some other message inside of it, for example, an error message. But as you can imagine, in order to solve this, we now bring in the technique of component composition where we can compose the model and success components together.